<template>
	<view class="fullContent bgf8">
		<view class="patientInfoWrap bgw pd30">
			<view class="title">
				<img src="../../static/bg/Myprescription1.png" mode=""></img>
				患者信息
			</view>
			<view class="name"><text class="txt">患者：</text><text class="nameTxt">张东东</text>
				<view class="shu"></view>男<view class="shu"></view>42岁
			</view>
			<view class="patientInfo">
				<text class="txt">主诉：</text>
				<view class="info">最近总是感觉精神困顿，不想说话伴随着咳嗽、气短、浑身乏力最近总是感觉精神困顿，不想说话伴随着咳嗽、气短、浑身乏力</view>
			</view>
		</view>
		<view class="diagnosisInfoWrap bgw pd30">
			<view class="title">
				<img src="../../static/bg/Myprescription2.png" mode=""></img>
				诊断信息
			</view>
			<view class="diagnosisInfo">
				<view class="left_title">中医诊断</view>
				<view class="diagnosis">最近总是感觉精</view>
			</view>
			<view class="medicineWrap">
				<view class="title">方剂类型：共6味</view>
				<view class="medicine">
					<view class="medicineItem pd30" v-for="i in 9">
						<view class="medicineName">甘草</view>
						<view class="medicineNum"><text>49</text>克</view>
					</view>
				</view>

			</view>
			<view class="showBtn" v-if="show" @click="show = false">展开<uni-icons type="bottom" size="14"></uni-icons>
			</view>
			<view class="usageMethod" v-show="!show">
				<view class="title">
					用法用量
				</view>
				<view class="methodItem">
					<view class="left_methodItem">剂型</view>
					<view class="right_methodItem">中药熬制</view>
				</view>
				<view class="methodItem">
					<view class="left_methodItem">用法</view>
					<view class="right_methodItem">内服</view>
				</view>
				<view class="methodItem">
					<view class="left_methodItem">煎出量</view>
					<view class="right_methodItem">80ml</view>
				</view>
				<view class="methodItem">
					<view class="left_methodItem">剂量</view>
					<view class="right_methodItem">共10剂，每日1剂，1剂分3次服用</view>
				</view>
				<view class="methodItem">
					<view class="left_methodItem">用药时间</view>
					<view class="right_methodItem">晨起服，午饭前服，睡前服</view>
				</view>
				<view class="methodItem">
					<view class="left_methodItem">医嘱</view>
					<view class="right_methodItem">注意保暖，少吹空调注意保暖少吹空调注意保暖少吹空调注意保暖</view>
				</view>
			</view>

		</view>
		<view class="orderDetail pd30 bgw">
			<view class="orderDetailItem">
				<view class="title" style="margin: 0;">订单明细</view>
			</view>
			<view class="orderDetailItem">
				<view>费用</view>
				<view class="cost">￥0.00</view>
			</view>
			<view class="orderDetailItem">
				<view>创建时间</view>
				<view>2021-11-09 12:33:00</view>
			</view>
			<view class="orderDetailItem">
				<view>订单编号</view>
				<view>20201000000000000</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: true
			};
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		font-size: 32upx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		display: flex;
		align-items: center;
		margin-bottom: 48upx;

		img {
			width: 56upx;
			height: 56upx;
			margin-right: 16upx;
		}
	}

	.patientInfoWrap {
		padding-top: 24upx;
		padding-bottom: 24upx;
		margin-bottom: 30upx;

		.txt {
			color: #414141;
		}

		.name {
			display: flex;
			align-items: center;
			font-size: 28upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #000000;
			margin-bottom: 34upx;

			.shu {
				width: 0upx;
				height: 24upx;
				border: 2upx solid #CCCCCC;
				margin: 0 24upx;
			}

			.nameTxt {
				font-weight: bold;
			}
		}

		.patientInfo {
			font-size: 28upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			display: flex;

			.info {
				width: 86%;
				line-height: 40upx;
			}
		}
	}

	.diagnosisInfoWrap {

		.diagnosisInfo {
			font-size: 28upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #414141;
			display: flex;
			justify-content: space-between;

			.diagnosis {
				width: 50%;
				text-align: right;
				margin-bottom: 56upx;
			}
		}

		.medicineWrap {
			margin-bottom: 46upx;

			.title {
				font-size: 28upx;
				margin-bottom: 40upx;
			}

			.medicine {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				
				.medicineItem {
					width: 336upx;
					height: 72upx;
					background: #FDF4F5;
					border-radius: 40upx;
					margin-bottom: 24upx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #232323;

					text {
						color: #F86C53;
						margin-right: 8upx;
					}
				}

				.medicineItem:last-of-type {
					margin-bottom: 0upx;
				}
			}
		}

		.showBtn {
			font-size: 28upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #7B7B7B;
			text-align: center;
			margin-bottom: 30upx;
		}
		.usageMethod {
			padding-top: 24upx;
			border-top: 2upx solid #E5E5E5;

			.methodItem {
				display: flex;
				justify-content: space-between;
				font-size: 28upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #414141;
				margin-bottom: 56upx;

				.right_methodItem {
					color: #000000;
					width: 80%;
					text-align: right;
				}
			}
			.methodItem:last-of-type{
				margin-bottom: 30upx;
			}
		}
		
	}
	.orderDetail{
		.orderDetailItem{
			height: 112upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			border-bottom: 2upx solid #EEEEEE;
			.cost{
				font-size: 36upx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #F86C53;
			}
		}
	}
</style>
